<template>
  <div class="find">
    <div id="find-search"  style="z-index:47">
      <!--
      <router-link to="/search">
      <img src="../assets/sou.png">
          </router-link>
          -->
      <img src="../assets/huojian.png" style="width: 70px;height: 100px;" onclick="javascript:scroll(0,0)">
    </div>

    <div id="find-top-bg">
      <img src="../assets/find-bg-01.png" style="width: 100%;height: 50%;">
    </div>

    <div class="find-behind">
      <mt-button type="primary" size="normal" class="find-btn" @click="zhuan1">
        更多义行
      </mt-button>
      &nbsp;&nbsp;
      <mt-button type="default" size="normal" class="find-btn" @click="zhuan2">
        我的报名
      </mt-button>
      <br/><br/>
      <!--
      <p class="find-text">国内</p>
      -->
      <mt-cell title="" is-link to="/more" style="text-align: left;">
        <img slot="icon" src="../assets/foot.png" width="27%" height="27%">

        <span style="color: green">更多</span>

      </mt-cell>
      <!--
          <img src="../assets/foot.png" style="height:27%;width: 27%;float: left;">
-->
      <ul>
        <li>
          <mt-cell title="" is-link to="/test">
          <img src="../../src/assets/guangdong.png" style="width: 100%;height: 30%;">
       </mt-cell>
        </li>
        <li>
          <mt-cell title="" is-link to="/test">
          <img src="../../src/assets/ximalaya.jpg" style="width: 100%;height: 30%;">
       </mt-cell>
        </li>
        <!--
        <li>
          <mt-cell title="" is-link to="/test">
          <img src="../../src/assets/beijing.jpg" style="width: 100%;height: 30%;">
        </mt-cell>
        </li>
        -->
        <li>
          <mt-cell title="" is-link to="/test">
          <img src="../../src/assets/fujian.jpg" style="width: 100%;height: 30%;">
        </mt-cell>
        </li>
      </ul>
    </div>
    <br/>
    <div id="find-remen">
      <p style="color: #00b0ff;font-weight:bold;font-size: 25px;">/* 热门义行 */</p>

      <br/>

      <div style="border:solid 2px black;">
        <div class="nav">
          <mt-button size="small" @click.native.prevent="active = 'tab-container1'">人气<mt-badge type="error">hot</mt-badge></mt-button>
          &nbsp;&nbsp;&nbsp;
          <mt-button size="small" @click.native.prevent="active = 'tab-container2'">鲜为人知</mt-button>
        </div>

        <div class="page-tab-container">
          <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
            <mt-tab-container-item id="tab-container1">
              <mt-cell
              <div class="find-hot">
                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/sanya.jpg">
                    <div>
                      <h>三亚</h>
                      <p>带你到海边忘掉城市的喧嚣，忘掉生活的烦恼</p>
                    </div>
                  </li>
                </ul>
                  </mt-cell>

                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/changsha.jpg">
                    <div>
                      <h>长沙</h>
                      <p>橘子红时，漫步最美长沙橘子洲头</p>
                    </div>
                  </li>
                </ul>
                  </mt-cell>

                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/dali.jpg">
                    <div>
                      <h>大理</h>
                      <p>阳光与花海，最甜蜜的相伴</p>
                    </div>
                  </li>
                </ul>
                </mt-cell>

              </div>
              <!--
                      title="tab-container 1">
                      -->

              </mt-cell>
            </mt-tab-container-item>

            <br/><br/>
            <mt-tab-container-item id="tab-container2">
              <mt-cell
              <div class="find-hot">
                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/changdao.jpg">
                    <div>
                      <h>山东长岛</h>
                      <p>山东省唯一的海岛县，享受赶海的乐趣</p>
                    </div>
                  </li>
                </ul>
                  </mt-cell>

                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/libo.jpg">
                    <div>
                      <h>黔南荔波</h>
                      <p>卧龙潭瀑布，飞流直下，喀斯特森林，满眼翠绿，这里是贵州南部的天然氧吧</p>
                    </div>
                  </li>
                </ul>
                  </mt-cell>

                <mt-cell title="" is-link to="/test">
                <ul>
                  <li>
                    <img src="../assets/shantou.jpg">
                    <div>
                      <h>广东汕头</h>
                      <p>走进汕头老城区，带你回味历史，细看骑楼</p>
                    </div>
                  </li>
                </ul>
                </mt-cell>
              </div>
              <!--
               title="tab-container 2">
               -->
              </mt-cell>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <div class="find-change-geshi" style="width: 100%;height: 50px;"></div>

    </div>

  </div>

</template>

<script>
  import Vue from 'vue'

  export default {
    name: 'find',
    data () {
    return {
      active: 'tab-container1'

    }},
  methods: {
    zhuan1(){
      this.$router.push({path:'/more'})
    },
    zhuan2(){
      this.$router.push({path:'/test'})
    }

  },

  computed: {

  },
  components: {}

  }
</script>


<style>
  ul,li{
    list-style:none;
  }
  .find-hot li{
    height: 100px;
  }
  .find-hot img{
    width: 100px;
    height: 100px;
    float: left;
    padding-right: 15px;
  }
  .find-hot{
    text-align: left;
  }
  #find-remen{
    text-align: center;
  }
  .find-behind{
    text-align: center;
  }
  .find-hot h{
    font-size:20px;
  }
  .find-hot p{
    color:#cccccc;
    font-size: 15px;
    width:700px;
  }

  .item {
    display: inline-block;
  }

  .nav {
    padding: 15px;
  }

  .link {
    color: inherit;
    padding: 20px;
    display: block;
  }
  .find-text{
    text-align: left;
    font-family:方正舒体;
    font-size:30px;
  }

  .find-btn{
    width:30%;
    height: 30%;
  }
  #find-search{
    position:fixed;
    bottom:60px;
    right:40px;
  }
  .find-behind{
    margin-top: 3%;
  }

</style>
